<template>
  <div class="section-two" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    <div class="section-header-two">人企互动概览</div>
    <div class="box" v-if="jz">
        <div class="item circle-wrapper" ref="item" :style="`width:${awith}`">
            <div class="warning circle"></div>
            <div class="flex-center icon">
            <div :style="`margin:5px 0 5px 0;font-size:${height * 1/15}px;width:70px;text-align:center`">人才关注度</div>
            <div :style="`font-size:${height * 1/10}px;color:#FF8C00;font-weight:bold`">{{dataTotal.attention}}</div>
            </div>
        </div>
        <div class="item  circle-wrapper" ref="item" :style="`width:${awith}`">
            <div class="error circle"></div>
            <div class="flex-center icon">
              <div :style="`margin:5px 0 5px 0;font-size:${height * 1/15}px;width:70px;text-align:center`">邀请投递量</div>
              <div :style="`font-size:${height * 1/10}px;color:#FF8C00;font-weight:bold`">{{dataTotal.invite}}</div>
            </div>
        </div>
        <div class="item  circle-wrapper" ref="item" :style="`width:${awith}`">
            <div class="success circle"></div>
            <div class="flex-center icon">
            <div :style="`margin:5px 0 5px 0;font-size:${height * 1/15}px;width:100px;text-align:center`">求职意向达成</div>
            <div :style="`font-size:${height * 1/10}px;color:#FF8C00;font-weight:bold`">{{dataTotal.reach}}</div>
            </div>
        </div>
    </div>
    <animae-jz  class="box" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { talentEnterpriseInteractive } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: null,
      awith:'',
      dataTotal:{},
      jz:true
    //   fontSize:this.height * 1/200+'px',
      
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30-10 + 'px',
        height: this.height-10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.awith = this.$refs.item.offsetHeight+'px'
    this.$nextTick(_=>{
     this.init()
    })
  },
  methods: {
    init(){
      this.jz=false
      talentEnterpriseInteractive(this.dateProp).then(({data:{data}})=>{
        this.jz=true
        this.dataTotal=data
        console.log(data)
      })
    },
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
    margin-top 20px;
  .box
    display flex
    justify-content space-around
    padding-top 1%
    width 100%
    height 80%
  .flex-center
    display flex
    justify-content center
    align-items center
    flex-direction column
  .item 
    height 70%
    border-radius 50%
    position relative;
  
</style>